<template>
  <div class="comment-card__wrap">
    <div class="comment-card1">
      <div class="comment-card1__l">
        <yun-avatar :src="info.userAvatar"></yun-avatar>
      </div>
      <div class="comment-card1__r">
        <div class="header">
          <h6>{{info.userNick}}</h6>
          <p>{{floor}}楼</p>
        </div>
        <p class="comment-box">{{info.comment}}</p>
        <div class="footer">
          <h6>{{dateConvert(info.createTime)}}</h6>
          <p>
            <span>回复</span>
            <span>赞{{likeNum}}</span>
          </p>
        </div>

        <div class="comment-card2">
          <div class="comment-card2__l">
            <yun-avatar :src="src"></yun-avatar>
          </div>
          <div class="comment-card2__r">
            <div class="header">
              <h6>{{name}}</h6>
              <p>{{floor}}楼</p>
            </div>
            <p class="comment-box">{{comment}}</p>
            <div class="footer">
              <h6>{{time}}</h6>
              <p>
                <span>回复</span>
                <span>赞{{likeNum}}</span>
              </p>
            </div>
            <div class="comment-card3">
              <div class="comment-card3__l">
                <yun-avatar :src="src"></yun-avatar>
              </div>
              <div class="comment-card3__r">
                <div class="header">
                  <h6>{{name}}</h6>
                  <p>{{floor}}楼</p>
                </div>
                <p class="comment-box">{{comment}}</p>
                <div class="footer">
                  <h6>{{time}}</h6>
                  <p>
                    <span>回复</span>
                    <span>赞{{likeNum}}</span>
                  </p>
                </div>
              </div>

            </div>
            <div class="comment-card3">
              <div class="comment-card3__l">
                <yun-avatar :src="src"></yun-avatar>
              </div>
              <div class="comment-card3__r">
                <div class="header">
                  <h6>{{name}}</h6>
                  <p>{{floor}}楼</p>
                </div>
                <p class="comment-box">{{comment}}</p>
                <div class="footer">
                  <h6>{{time}}</h6>
                  <p>
                    <span>回复</span>
                    <span>赞{{likeNum}}</span>
                  </p>
                </div>
              </div>

            </div>
          </div>

        </div>

      </div>

    </div>
  </div>
</template>


<script>
  import {dateConvert} from "../../action/utils/dataConvert";

  export default {
    name:'commentCard',

    props:{
      info:{
        type:Object,
        default:()=>({})
      }
    },
    data(){

      //return
      return {
        src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
        name:'我我欸',
        floor:6,
        comment:'这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容',
        time:'3小时前',
        likeNum:10,
      }
    },


  }

</script>




<style lang="scss" scoped>
  .comment-card__wrap{
    .comment-card1{
      box-sizing:content-box;
      padding:21*$length 24*$length 24*$length;
      width:890*$length;
      border-bottom:1px dashed #EFEFEF;
      @extend %flex-row-spb;
      align-items: flex-start;
      background-color: #fff;

      .comment-card1__l{
        width:48*$length;
      }
      .comment-card1__r{
        width:826*$length;
        .header{
          @extend %flex-row-spb;
            h6{
               @include fontStyle(14,19,500,#666,left)
             }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }

    .comment-card2{
      box-sizing:content-box;
      padding:20*$length;
      width:778*$length;
      border-bottom:1px dashed #e5e5e5;
      @extend %flex-row-spb;
      align-items: flex-start;
      border-radius: 4*$length;
      background-color: #F4F8FA;
      .comment-card2__l{
        width:48*$length;
      }
      .comment-card2__r{
        width:714*$length;
        .header{
          @extend %flex-row-spb;
          h6{
            @include fontStyle(14,19,500,#666,left)
          }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }

    .comment-card3{
      margin-left:-16*$length;
      box-sizing:content-box;
      padding:10*$length 0 10*$length 16*$length;
      width:714*$length;
      border-bottom:1px dashed #e5e5e5;
      border-left:1px solid #E5E5E5;
      @extend %flex-row-spb;
      align-items: flex-start;

      .comment-card3__l{
        width:48*$length;
      }
      .comment-card3__r{
        width:650*$length;
        .header{
          @extend %flex-row-spb;
          h6{
            @include fontStyle(14,19,500,#666,left)
          }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }
  }
</style>
